import React, { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './ChatPage.css';
import FaqSection from './FaqSection';

/**
 * 聊天消息的类型定义
 * @property {string} id - 消息唯一标识
 * @property {string | React.ReactNode} content - 消息内容（可以是纯文本或React节点）
 * @property {'user' | 'ai'} sender - 发送者类型（用户或AI）
 * @property {Date} timestamp - 消息时间戳
 * @property {boolean} [isSystemMessage] - 可选，标记是否为系统自动生成的消息
 */
interface Message {
  id: string;
  content: string | React.ReactNode;
  sender: 'user' | 'ai';
  timestamp: Date;
  isSystemMessage?: boolean;
}

/**
 * 聊天页面主组件
 * @returns {JSX.Element} 渲染的聊天界面
 */
const ChatPage: React.FC = () => {
  const navigate = useNavigate();
  // 状态管理
  const [messages, setMessages] = useState<Message[]>([]);
  const [userMessages, setUserMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const chatBottomRef = useRef<HTMLDivElement>(null);
  const [initialized, setInitialized] = useState(false);

  // API基础URL
  const API_URL = 'http://localhost:3000';

  /* ========== 自动回复处理函数集合 ========== */
  
  /**
   * 获取会员续费指南
   * @returns {React.ReactNode} 续费指南回复内容
   */
  const getRenewalGuide = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，版本更新后会员名称有些变化；</p>
        <ul>
          <li>如您之前买的个人专业版会员，可续费【基础版-模板会员-个人授权】会员；</li>
          <li>如您之前购买商户版/新媒体商户版/全用途商户版会员，可续费【基础版-模板会员-企业授权】会员；</li>
          <li>如您之前购买的是标准版会员，可续费团队版-模板会员；</li>
          <li>专业版目前已无此套餐出售，您可以选择团队版/企业版-模板会员进行续费。</li>
        </ul>
        <p style={{ marginTop: '12px' }}>
          您可以通过 <a href="https://www.gaoding.com/renewal" target="_blank" rel="noopener noreferrer">会员续费页面</a> 进行操作。
        </p>
      </div>
    );
  };

  /**
   * 获取退款政策说明
   * @returns {React.ReactNode} 退款政策回复内容
   */
  const getRefundPolicy = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>稿定设计提供的付费服务属于虚拟产品，请您在购买前确认服务内容、功能和条款，⼀经⽣效后不⽀持退订和退款，请您谅解。</p>
        
        <h4>关于故障：</h4>
        <p>服务服务期限中包含稿定设计解决故障、服务器维修、调整、升级等所需⽤的合理时间，对上述情况所需⽤的时间或造成的任何损失（如有），稿定设计不予任何形式的赔偿/补偿，但稿定设计会尽可能将影响降至最低。</p>
        
        <h4>关于退款：</h4>
        <p>您知悉并同意，服务服务系⽹络商品和虚拟商品，采⽤先收费后服务的⽅式，服务费⽤是您所购买的服务服务所对应的网络商品价格，而非预付款或者存款、定金、储蓄卡等性质，服务服务⼀经开通后不可转让、退款（如因服务服务存在重⼤瑕疵导致您完全⽆法使⽤除外）、换货、兑换现⾦亦不得⽤于商业领域，如买卖、置换、抵押等。</p>
        <p>为了保证您的⽤户权益，请您通过官⽅渠道购买企业稿定服务，⼀切通过非官方公布渠道取得的虚拟产品及其衍⽣服务均不获保护，并且稿定设计有权中止或终止对您的服务；由此给您带来的损失，稿定设计无须承担责任。</p>
      </div>
    );
  };

  /**
   * 获取会员购买信息
   * @returns {React.ReactNode} 会员购买回复内容
   */
  const getMembershipPurchaseInfo = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，请在网站首页，点击右上角【会员限时特惠】可进行会员的选购并查看会员权益</p>
        <div style={{ margin: '16px 0' }}>
          <img 
            src="/public/Authoring_tool/image3.png" 
            alt="会员限时特惠" 
            style={{ 
              maxWidth: '100%', 
              borderRadius: '8px',
              border: '1px solid #eee'
            }}
          />
        </div>
        <p>
          套餐订购入口：
          <a 
            href="https://www.gaoding.com/pricing" 
            target="_blank" 
            rel="noopener noreferrer"
            style={{ color: '#3d50ff', textDecoration: 'underline' }}
          >
            https://www.gaoding.com/pricing
          </a>
        </p>
      </div>
    );
  };

  /**
   * 获取视频号教程信息
   * @returns {React.ReactNode} 视频号教程回复内容
   */
  const getVideoTutorialInfo = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <h4>【高效学习设计？关注稿定设计视频号就对了！】</h4>
        <ul>
          <li>✅ 每周更新精品教程：排版技巧/配色公式/功能解析，从小白到高手一站搞定</li>
          <li>✅ 专为稿定用户打造：匹配软件操作，学完立马能用。解锁海量设计干货，提升效率不加班</li>
        </ul>
        <div style={{ margin: '16px 0', textAlign: 'center' }}>
          <img 
            src="/public/Authoring_tool/image4.png" 
            alt="稿定视频号教程" 
            style={{ 
              maxWidth: '100%', 
              maxHeight: '300px',
              borderRadius: '8px',
              border: '1px solid #eee'
            }}
          />
        </div>
        <p>扫码关注我们的视频号，获取更多实用教程！</p>
      </div>
    );
  };

  /**
   * 获取发票申请指南
   * @returns {React.ReactNode} 发票申请回复内容
   */
  const getInvoiceGuide = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好！感谢您选择稿定设计。关于发票开具的相关信息如下：</p>
        
        <h4>开票方式：</h4>
        <p>登录账号后，点击开票链接：<a href="https://www.gaoding.com/admin/order-invoice" target="_blank" rel="noopener noreferrer">https://www.gaoding.com/admin/order-invoice</a></p>
        <p>选择对应订单，可申请电子普通发票或电子增值税专用发票</p>
        
        <h4>重要提示：</h4>
        
        <ul>
          <li>✅ 发票抬头可自由填写，无个人或企业限制</li>
          <li>✅ 电子发票与纸质发票具有同等法律效力，均可报销</li>
          <li>✅ 增值税税率为6%（会员费用为含税价）</li>
        </ul>
        
        <h4>注意事项：</h4>
        <ul>
          <li>⚠️ 请仔细核对开票信息，提交后不可修改</li>
          <li>⚠️ 电子发票将在2个工作日内发送至您的邮箱</li>
        </ul>
        
        <p style={{ marginTop: '12px' }}>如有其他问题，欢迎随时咨询。感谢您的支持！</p>
      </div>
    );
  };

  /**
   * 获取税率信息
   * @returns {React.ReactNode} 税率回复内容
   */
  const getTaxRateInfo = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，于稿定设计购买VIP、印刷品、抠图等商品均可申请开票；专票和普通发票的税点都是6%哈。</p>
      </div>
    );
  };

  /**
   * 获取帮助中心信息 - 圆角按钮形式
   * @returns {React.ReactNode} 帮助中心回复内容
   */
  const getHelpCenterInfo = (): React.ReactNode => {
    const handleHelpCenterClick = () => {
      window.open('https://www.gaoding.com/help-center/article/1640633361279381504', '_blank');
    };

    return (
      <div className="auto-reply-message">
        <p>您好，您可以点击下方按钮进入帮助中心：</p>
        <button 
          className="help-center-button"
          onClick={handleHelpCenterClick}
        >
          稿定设计帮助中心
        </button>
      </div>
    );
  };

  /**
   * 获取教程集锦信息
   * @returns {React.ReactNode} 教程集锦回复内容
   */
  const getTutorialCollection = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>为了让大家更快速的熟悉稿定编辑功能，特别为大家整理了相关的玩法教程，大家可点击下方的链接查看：</p>
        
        <div className="tutorial-links">
          <ul>
            <li><a href="https://www.gaoding.com/tutorials/text-highlight" target="_blank" rel="noopener noreferrer">如何给文字划重点</a></li>
            <li><a href="https://www.gaoding.com/tutorials/text-list" target="_blank" rel="noopener noreferrer">如何添加文字列表</a></li>
            <li><a href="https://www.gaoding.com/tutorials/custom-mask" target="_blank" rel="noopener noreferrer">如何自定义蒙版形状</a></li>
            <li><a href="https://www.gaoding.com/tutorials/layer-management" target="_blank" rel="noopener noreferrer">如何管理图层/调整图层顺序</a></li>
            <li><a href="https://www.gaoding.com/tutorials/add-collage" target="_blank" rel="noopener noreferrer">如何在模板中添加拼图</a></li>
            <li><a href="https://www.gaoding.com/tutorials/format-painter" target="_blank" rel="noopener noreferrer">如何使用格式刷</a></li>
            <li><a href="https://www.gaoding.com/tutorials/ruler-guide" target="_blank" rel="noopener noreferrer">如何添加标尺与参考线</a></li>
            <li><a href="https://www.gaoding.com/tutorials/image-rounded" target="_blank" rel="noopener noreferrer">如何给图片设置圆角</a></li>
            <li><a href="https://www.gaoding.com/tutorials/image-gradient" target="_blank" rel="noopener noreferrer">如何给图片做渐变色效果</a></li>
            <li><a href="https://www.gaoding.com/tutorials/brush-tool" target="_blank" rel="noopener noreferrer">如何在模板中使用画笔</a></li>
            <li><a href="https://www.gaoding.com/tutorials/multi-size" target="_blank" rel="noopener noreferrer">一张海报如何快速输出多种尺寸</a></li>
          </ul>
        </div>
        
        <p style={{ marginTop: '16px' }}>
          稿定设计视频号每周都会更新视频教程，有排版、配色、稿定功能使用等教学内容，是专门为稿定用户开设的学习通道，可以扫码关注学习！
        </p>
        
        <div style={{ margin: '16px 0', textAlign: 'center' }}>
          <img 
            src="/public/Authoring_tool/image4.png" 
            alt="稿定教程集锦" 
            style={{ 
              maxWidth: '100%', 
              maxHeight: '300px',
              borderRadius: '8px',
              border: '1px solid #eee'
            }}
          />
        </div>
      </div>
    );
  };

  const getMembershipTypeComparison = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，以下是模板会员、素材下载会员和大会员的主要区别：</p>
        
        <div style={{ margin: '16px 0' }}>
          <img 
            src="/public/Authoring_tool/image1.png" 
            alt="会员类型区别表1"
            style={{
              maxWidth: '100%',
              borderRadius: '8px',
              border: '1px solid #eee',
              marginBottom: '16px'
            }}
          />
          <img 
            src="/public/Authoring_tool/image2.png" 
            alt="会员类型区别表2"
            style={{
              maxWidth: '100%',
              borderRadius: '8px',
              border: '1px solid #eee'
            }}
          />
        </div>
        
        <h4>总结：</h4>
        <ul>
          <li><strong>模板会员</strong>：适合需要快速制作设计但不需要源文件的用户</li>
          <li><strong>素材下载会员</strong>：适合专业设计师需要高质量源文件进行二次创作</li>
          <li><strong>大会员</strong>：结合两者优势，适合有全面需求的用户</li>
        </ul>
      </div>
    );
  };

  const getCommercialLicenseComparison = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，基础版-模板会员个人商用授权与企业商用授权套餐功能及可下载素材并无差异，区别在于所授权的主体不同：</p>
        
        <h4>企业授权套餐：</h4>
        <ul>
          <li><strong>授权主体：</strong>有工商注册主体的企业</li>
          <li><strong>适用场景：</strong>企业官网/企业公众号/企业微博/有营业执照的店铺等</li>
        </ul>
        
        <h4>个人授权套餐：</h4>
        <ul>
          <li><strong>授权主体：</strong>非工商注册的个人主体</li>
          <li><strong>适用场景：</strong>个人微博/个人公众号/无营业执照仅采用身份证认证的C店等</li>
        </ul>
      </div>
    );
  };

  const getPersonalMembershipComparison = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，二者可下载素材一致，均可无水印下载版权素材</p>
        
        <h4>区别在于：</h4>
        <ul>
          <li><strong>个人学习会员：</strong>仅有版权素材下载权限，适合用于个人学习，练习，无任何商用授权提供</li>
          <li><strong>个人商用会员：</strong>可提供商用授权保障，支持会员在授权范围内商用</li>
        </ul>
      </div>
    );
  };

  const getInvoiceTypeInfo = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，以下是不同服务的发票开具项目：</p>
        
        <h4>会员服务：</h4>
        <ul>
          <li><strong>模板会员（基础版、团队版、企业版）：</strong>创意设计系统服务费</li>
        </ul>
        
        <h4>其他服务：</h4>
        <ul>
          <li><strong>单购设计作品：</strong>版权服务费</li>
          <li><strong>购买抠图服务：</strong>信息技术服务*智能抠图服务</li>
          <li><strong>稿定AI点数：</strong>创意设计系统服务费</li>
        </ul>
      </div>
    );
  };

  const getInvoiceVerificationGuide = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <h4>【发票核验指引】</h4>
        <p>您好！若当前无法查询发票，建议按以下步骤操作：</p>
        
        <ol>
          <li><strong>更新插件：</strong>卸载原有插件 → 前往<a href="https://inv-veri.chinatax.gov.cn" target="_blank" rel="noopener noreferrer">税务平台官网</a>下载最新版</li>
          <li><strong>重启浏览器：</strong>安装后彻底关闭浏览器重新启动</li>
          <li><strong>重新核验：</strong>登录系统再次尝试查询</li>
        </ol>
        
        <p style={{ marginTop: '12px' }}>
          如仍无法查询，可能是税务局系统同步延迟，建议2-3个工作日后再次尝试。
        </p>
      </div>
    );
  };

  const getReissueInvoiceGuide = (): React.ReactNode => {
    return (
      <div className="auto-reply-message">
        <p>您好，辛苦输入<strong>【人工】</strong>，转接人工客服，提供以下信息：</p>
        
        <ul>
          <li><strong>订单号：</strong>原订单编号</li>
          <li><strong>正确开票信息：</strong>单位名称/税号等</li>
          <li><strong>收票邮箱：</strong>接收电子发票的邮箱地址</li>
        </ul>
        
        <p style={{ marginTop: '12px' }}>
          客服收到后会反馈财务为您重开发票，处理时间一般为3-5个工作日。
        </p>
      </div>
    );
  };

  const getGaodouBalanceInfo = (): React.ReactNode => {
  return (
    <div className="auto-reply-message">
      <p>您好，查看稿豆余额方法：</p>
      <ol>
        <li>点击稿定设计右上角头像</li>
        <li>选择【稿豆】选项</li>
        <li>即可查看当前稿豆余额</li>
      </ol>
      <div style={{ margin: '16px 0', textAlign: 'center' }}>
        <img 
          src="/public/Authoring_tool/image5.png"
          alt="稿豆余额查看指引"
          style={{
            maxWidth: '100%',
            borderRadius: '8px',
            border: '1px solid #eee'
          }}
        />
      </div>
      <p>如有其他问题，欢迎随时咨询！</p>
    </div>
  );
};

const getGaodouDistributionInfo = (): React.ReactNode => {
  return (
    <div className="auto-reply-message">
      <h4>📅 稿豆发放与到期规则</h4>
      
      <h5>✅ 发放时间：</h5>
      <p>每月会员生效日自动发放</p>
      <p>▸ 例：5月5日购买会员 → 每月5号发放稿豆</p>
      
      <h5>✅ 到期规则：</h5>
      <ul>
        <li>当月稿豆：次月发放日自动清零（如5月5日发放的稿豆，6月5日到期）</li>
        <li>重新发放：清零后立即补充次月额度</li>
      </ul>
      
      <p style={{ marginTop: '12px' }}>
        您可以在【我的稿豆】页面查看发放记录和到期时间。
      </p>
    </div>
  );
};

const getGaodouPurchaseInfo = (): React.ReactNode => {
  return (
    <div className="auto-reply-message">
      <p>您好，关于单独购买稿豆的方法：</p>
      
      <h4>网页端购买：</h4>
      <ol>
        <li>进入稿定设计首页</li>
        <li>点击左下方【管理与设置】</li>
        <li>选择【加购稿豆】选项</li>
      </ol>
      
      <h4>APP端购买：</h4>
      <ol>
        <li>点击【会员】</li>
        <li>进入【账户概览】</li>
        <li>点击稿豆旁边的【加购】按钮</li>
      </ol>
      
      <div style={{ margin: '16px 0', textAlign: 'center' }}>
        <img 
          src="/public/Authoring_tool/image6.png" 
          alt="稿豆购买指引"
          style={{
            maxWidth: '100%',
            borderRadius: '8px',
            border: '1px solid #eee'
          }}
        />
      </div>
      
      <p>如有任何购买问题，欢迎随时咨询！</p>
    </div>
  );
};

const getAutoRenewalCancelGuide = (): React.ReactNode => {
  return (
    <div className="auto-reply-message">
      <h4>您好！关于自动续费问题，以下是详细说明和取消方法：</h4>
      
      <h5>为什么会产生自动扣费？</h5>
      <p>如果您开通了稿定设计的自动续费会员，且未在到期前取消，系统会在会员到期前1-2天自动续费并扣款。</p>
      
      <h5>如何取消自动续费？</h5>
      <p>您可以根据支付方式选择对应的取消方法：</p>
      
      <h5>1️⃣ 微信支付</h5>
      <ul>
        <li>打开微信 → 我 → 服务 → 钱包 → 支付设置 → 自动续费</li>
        <li>找到稿定设计并关闭自动续费</li>
      </ul>
      
      <h5>2️⃣ 支付宝支付</h5>
      <ul>
        <li>打开支付宝 → 我的 → 设置（⚙️） → 支付设置 → 免密支付/自动扣款</li>
        <li>选择稿定设计并关闭自动扣款</li>
      </ul>
      
      <h5>3️⃣ 苹果App Store支付</h5>
      <ul>
        <li>打开App Store → 点击右上角 Apple ID/头像 → 订阅 → 取消稿定设计会员</li>
        <li>若操作不便，可联系苹果客服 400-666-8800 协助取消</li>
      </ul>
      
      <h5>⚠️ 重要提醒</h5>
      <ul>
        <li>请在会员到期前至少2天取消自动续费，否则可能会扣款成功。</li>
        <li>取消后，当前会员权益仍可正常使用至到期日，不会提前终止。</li>
      </ul>
    </div>
  );
};

const getFontCommercialUseInfo = (): React.ReactNode => {
  return (
    <div className="auto-reply-message">
      <h4>会员商用授权说明</h4>
      
      <h5>1️⃣ 模板会员</h5>
      <ul>
        <li>✅ 可使用平台在线字体库内所有正版字体进行在线编辑</li>
        <li>✅ 设计成品可依据会员授权范围商用</li>
        <li>⚠️ 注：仅限在线设计导出作品，不支持源文件下载</li>
      </ul>
      
      <h5>2️⃣ 素材下载会员</h5>
      <ul>
        <li>✅ 可下载PSD/AI等格式源文件</li>
        <li>⚠️ 重要提示：</li>
      </ul>
      
      <p>素材中包含的字体仅限预览使用</p>
      
      <h5>商用前请确保：</h5>
      <ul>
        <li>• 替换为您已获授权的正版字体</li>
        <li>• 或使用开源可商用字体</li>
      </ul>
    </div>
  );
};
  /* ========== 核心功能函数 ========== */

  /**
   * 处理FAQ问题的点击事件
   * @param {string} question - 已去除序号前缀的纯净问题文本
   */
  const handleFaqQuestionClick = (question: string) => {
    setInputValue(question);
    handleSendMessageWithContent(question);
  };

  /**
   * 发送消息的通用函数
   * @param {string} content - 要发送的消息内容
   */
  const handleSendMessageWithContent = async (content: string) => {
    if (!content.trim() || isLoading) return;

    // 创建用户消息对象
    const userMsg: Message = {
      id: Date.now().toString(),
      content: content,
      sender: 'user',
      timestamp: new Date()
    };
    
    // 更新消息状态
    setMessages(prev => [...prev, userMsg]);
    setUserMessages(prev => [...prev, userMsg]);
    setInputValue('');
    setIsLoading(true);
    setError(null);

    /* ========== 自动回复检测逻辑 ========== */
    
    // 检测续费相关问题
    if (content.includes('如何续费') || content.includes('怎么续费') || content.includes('续费会员')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getRenewalGuide(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测退款相关问题
    if (content.includes('退货退款') || content.includes('可以退款吗') || content.includes('能退钱吗') || 
        content.includes('退款政策') || content.includes('退订服务')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getRefundPolicy(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测会员购买相关问题
    if (content.includes('如何购买会员') || content.includes('会员价格') || content.includes('查看会员权益')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getMembershipPurchaseInfo(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测视频号教程相关问题
    if (content.includes('稿定视频号教程') || content.includes('视频教程') || content.includes('视频号学习')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getVideoTutorialInfo(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测发票申请相关问题
    if (content.includes('申请发票') || content.includes('查看订单') || content.includes('开票')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getInvoiceGuide(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测税点相关问题
    if (content.includes('发票税点') || content.includes('税率多少') || content.includes('几个点')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getTaxRateInfo(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测帮助中心入口
    if (content.includes('帮助中心') || content.includes('客服入口') || content.includes('在线帮助')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getHelpCenterInfo(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测教程集锦相关问题
    if (content.includes('稿定玩法教程集锦') || content.includes('教程大全') || content.includes('使用教程')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getTutorialCollection(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测会员类型区别相关问题
    if (content.includes('模板会员') && 
        (content.includes('素材下载会员') || content.includes('素材会员')) && 
        (content.includes('大会员') || content.includes('区别') || content.includes('不同'))) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getMembershipTypeComparison(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测个人和企业商用授权区别问题
    if ((content.includes('个人商用授权') && content.includes('企业商用授权') && 
        (content.includes('区别') || content.includes('不同')))) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getCommercialLicenseComparison(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测个人学习会员和个人商用会员区别问题
    if ((content.includes('个人学习会员') && content.includes('个人商用会员') && 
        (content.includes('区别') || content.includes('不同')))) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getPersonalMembershipComparison(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测发票类型问题
    if (content.includes('发票类型') || content.includes('开票项目')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getInvoiceTypeInfo(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测发票查验问题
    if (content.includes('发票查验') || content.includes('查不到发票') || 
        content.includes('税务局查不到')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getInvoiceVerificationGuide(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    // 检测重开发票问题
    if (content.includes('重开发票') || content.includes('重新开票') || 
        content.includes('发票开错了')) {
      setTimeout(() => {
        const aiMsg: Message = {
          id: Date.now().toString(),
          content: getReissueInvoiceGuide(),
          sender: 'ai',
          timestamp: new Date()
        };
        setMessages(prev => [...prev, aiMsg]);
        setUserMessages(prev => [...prev, aiMsg]);
        setIsLoading(false);
      }, 500);
      return;
    }

    //检测稿豆余额查询问题
if (content.includes('如何查看我有多少稿豆') || content.includes('稿豆余额') || 
    content.includes('查看稿豆')) {
  setTimeout(() => {
    const aiMsg: Message = {
      id: Date.now().toString(),
      content: getGaodouBalanceInfo(),
      sender: 'ai',
      timestamp: new Date()
    };
    setMessages(prev => [...prev, aiMsg]);
    setUserMessages(prev => [...prev, aiMsg]);
    setIsLoading(false);
  }, 500);
  return;
}

// 检测稿豆发放时间问题
if (content.includes('会员稿豆什么时候发放') || content.includes('稿豆发放时间') || 
    content.includes('稿豆到期')) {
  setTimeout(() => {
    const aiMsg: Message = {
      id: Date.now().toString(),
      content: getGaodouDistributionInfo(),
      sender: 'ai',
      timestamp: new Date()
    };
    setMessages(prev => [...prev, aiMsg]);
    setUserMessages(prev => [...prev, aiMsg]);
    setIsLoading(false);
  }, 500);
  return;
}

// 检测单独购买稿豆问题
if (content.includes('可以单独购买稿豆吗') || content.includes('单独买稿豆') || 
    content.includes('稿豆加购')) {
  setTimeout(() => {
    const aiMsg: Message = {
      id: Date.now().toString(),
      content: getGaodouPurchaseInfo(),
      sender: 'ai',
      timestamp: new Date()
    };
    setMessages(prev => [...prev, aiMsg]);
    setUserMessages(prev => [...prev, aiMsg]);
    setIsLoading(false);
  }, 500);
  return;
}

// 检测自动续费取消问题
if (content.includes('自动续费怎么取消') || content.includes('取消自动续费') || 
    content.includes('关闭自动扣款')) {
  setTimeout(() => {
    const aiMsg: Message = {
      id: Date.now().toString(),
      content: getAutoRenewalCancelGuide(),
      sender: 'ai',
      timestamp: new Date()
    };
    setMessages(prev => [...prev, aiMsg]);
    setUserMessages(prev => [...prev, aiMsg]);
    setIsLoading(false);
  }, 500);
  return;
}

// 检测字体商用问题
if (content.includes('字体可以商用吗') || content.includes('字体商用授权') || 
    content.includes('商用字体')) {
  setTimeout(() => {
    const aiMsg: Message = {
      id: Date.now().toString(),
      content: getFontCommercialUseInfo(),
      sender: 'ai',
      timestamp: new Date()
    };
    setMessages(prev => [...prev, aiMsg]);
    setUserMessages(prev => [...prev, aiMsg]);
    setIsLoading(false);
  }, 500);
  return;
}

    /* ========== 默认API调用逻辑 ========== */
    try {
      const response = await axios.post(`${API_URL}/api/doubao`, {
        content: content
      });

      const aiMsg: Message = {
        id: Date.now().toString(),
        content: response.data.reply,
        sender: 'ai',
        timestamp: new Date()
      };
      
      setMessages(prev => [...prev, aiMsg]);
      setUserMessages(prev => [...prev, aiMsg]);
    } catch (err) {
      console.error('API请求错误:', err);
      setError('请求服务时出错，请稍后再试');
      
      const errorMsg: Message = {
        id: Date.now().toString(),
        content: '抱歉，我暂时无法处理您的请求',
        sender: 'ai',
        timestamp: new Date()
      };
      
      setMessages(prev => [...prev, errorMsg]);
      setUserMessages(prev => [...prev, errorMsg]);
    } finally {
      setIsLoading(false);
    }
  };

  /**
   * 处理发送按钮点击或回车键发送
   */
  const handleSendMessage = async () => {
    handleSendMessageWithContent(inputValue);
  };

  /**
   * 处理键盘事件
   * @param {React.KeyboardEvent} e - 键盘事件对象
   */
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  /* ========== 生命周期钩子 ========== */

  // 初始化欢迎消息和FAQ
  useEffect(() => {
    if (!initialized) {
      const welcomeMessage: Message = {
        id: 'welcome-message',
        content: (
          <div>
            欢迎使用稿定设计，
            <button 
              className="help-center-button" 
              onClick={() => window.open('https://www.gaoding.com/help-center', '_blank')}
            >
              这里
            </button>
            查看帮助中心，如需人工客服帮助，请在对话框中输入"人工"。人工客服工作时间为工作日09:30-12:00，13:30-18:00，非工作时间欢迎您留言，我们将在24小时内答复您。
          </div>
        ),
        sender: 'ai',
        timestamp: new Date(),
        isSystemMessage: true
      };

      const faqMessage: Message = {
        id: 'faq-message',
        content: <FaqSection onQuestionClick={handleFaqQuestionClick} />,
        sender: 'ai',
        timestamp: new Date(),
        isSystemMessage: true
      };

      setMessages([welcomeMessage, faqMessage]);
      setInitialized(true);
    }
  }, [initialized]);

  // 自动滚动到聊天底部
  useEffect(() => {
    chatBottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, userMessages]);

  /* ========== 渲染辅助函数 ========== */

  /**
   * 渲染AI头像组件
   * @returns {JSX.Element} AI头像
   */
  const renderAIAvatar = () => {
    return (
      <div className="chat-message__avatar">
        <div className="ai-avatar">
          <span className="ai-avatar-text">稿定</span>
        </div>
      </div>
    );
  };

  /* ========== 主渲染函数 ========== */
  return (
    <div className="chat-interface">
      {/* 聊天头部 */}
      <div className="chat-interface__header">
        <div className="header-title">
          <span className="header-logo">稿定</span>
          <span className="header-text">稿定设计助手</span>
        </div>
      </div>
      
      {/* 消息显示区域 */}
      <div className="chat-interface__messages">
        {/* 系统自动消息（欢迎语和FAQ） */}
        {messages.filter(msg => msg.isSystemMessage).map(msg => (
          <div key={msg.id} className={`chat-message chat-message--${msg.sender}`}>
            {msg.sender === 'ai' && renderAIAvatar()}
            
            <div className="chat-message__bubble">
              <div className="chat-message__timestamp">
                {msg.sender === 'ai' ? '稿定设计助手 · ' : ''}
                {msg.timestamp.toLocaleTimeString()}
              </div>
              <div className={`chat-message__content chat-message__content--${msg.sender}`}>
                {msg.content}
              </div>
            </div>
          </div>
        ))}
        
        {/* 用户和AI的对话消息 */}
        {userMessages.map(msg => (
          <div key={msg.id} className={`chat-message chat-message--${msg.sender}`}>
            {msg.sender === 'ai' && renderAIAvatar()}
            
            <div className="chat-message__bubble">
              <div className="chat-message__timestamp">
                {msg.sender === 'ai' ? '稿定设计助手 · ' : ''}
                {msg.timestamp.toLocaleTimeString()}
              </div>
              <div className={`chat-message__content chat-message__content--${msg.sender}`}>
                {msg.content}
              </div>
            </div>
          </div>
        ))}

        {/* 加载指示器（AI正在输入） */}
        {isLoading && (
          <div className="chat-message chat-message--ai">
            {renderAIAvatar()}
            <div className="chat-message__bubble">
              <div className="chat-message__timestamp">稿定设计助手 · {new Date().toLocaleTimeString()}</div>
              <div className="chat-message__typing">
                <span className="chat-message__typing-dot"></span>
                <span className="chat-message__typing-dot"></span>
                <span className="chat-message__typing-dot"></span>
              </div>
            </div>
          </div>
        )}
        <div ref={chatBottomRef} /> {/* 用于自动滚动的锚点 */}
      </div>
      
      {/* 错误提示 */}
      {error && <div className="chat-interface__error">{error}</div>}
      
      {/* 输入区域 */}
      <div className="chat-interface__input-area">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={handleKeyPress}
          placeholder="输入消息..."
          disabled={isLoading}
          className="chat-interface__input"
        />
        <button
          onClick={handleSendMessage}
          disabled={isLoading || !inputValue.trim()}
          className="chat-interface__send-button"
        >
          {isLoading ? '发送中...' : '发送'}
        </button>
      </div>
    </div>
  );
};

export default ChatPage;